<template>
    <rx-layout>
        <div slot="center">
            <a-form :form="form" layout="vertical" style="height: 100%;overflow-x: hidden">
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label="i18n2('prefix','表前缀')">
                            <a-input :placeholder="i18n2('prefix','表前缀')" v-model="filterConfig.tablePre"
                                     v-decorator="['tablePre',{rules: [{ required: false, message: i18n2('prefix','表前缀','input')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label="i18n2('searchField','搜索字段')">
                            <a-input :placeholder="i18n2('searchField','搜索字段')" v-model="filterConfig.fieldName"
                                     v-decorator="['fieldName',{rules: [{ required: true, message: i18n2('searchField','表前缀','input')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label="i18n2('label','标签')">
                            <a-input v-model="filterConfig.fieldLabel" @change="updateI18nName()">
                                <my-icon slot="addonAfter" type="iconearth-full" @click="editI18nName()"/>
                            </a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="!['datepicker','number','numberrange'].includes(filterConfig.fc)?12:24">
                        <a-form-item
                            :label="i18n2('inputCtl','输入控件')">
                            <a-select v-model="filterConfig.fc"
                                      :options="fieldControls" @change="fcChange($event)"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12" v-if="!['datepicker','number','numberrange'].includes(filterConfig.fc)">
                        <a-form-item
                            :label="i18n2('comparator','比较符')">
                            <div>
                                <a-select
                                    v-if="(filterConfig.dataType==null || filterConfig.dataType=='string'   || filterConfig.dataType=='varchar' || filterConfig.dataType=='clob') &&  filterConfig.fc!='month'"
                                    v-model="filterConfig.fieldOp">
                                    <a-select-option value="EQ">{{ i18n3('equal', '等于') }}</a-select-option>
                                    <a-select-option value="NEQ">{{ i18n3('notEqual', '不等于') }}</a-select-option>
                                    <a-select-option value="IN">{{ i18n3('include', '包含') }}</a-select-option>
                                    <a-select-option value="MLK"
                                                     v-if="['select','treeselect','dialog','user','group','checkboxgroup'].includes(filterConfig.fc)">
                                        {{ i18n3('multipleFuzzyMatch', '多选模糊查询') }}
                                    </a-select-option>
                                    <a-select-option value="LK">{{ i18n3('fuzzyMatch', '模糊匹配') }}</a-select-option>
                                    <a-select-option
                                        value="LEK">{{ i18n3('leftQuery', '左模糊查询') }}
                                    </a-select-option>
                                    <a-select-option
                                        value="RIK">{{ i18n3('rightQuery', '右模糊查询') }}
                                    </a-select-option>
                                </a-select>
                                <a-select v-if="['int','number'].includes(filterConfig.dataType) "
                                          v-model="filterConfig.fieldOp">
                                    <a-select-option value="EQ">{{ i18n3('equal', '等于') }}</a-select-option>
                                    <a-select-option value="NEQ">{{ i18n3('notEqual', '不等于') }}</a-select-option>
                                    <a-select-option value="IN">{{ i18n3('include', '包含') }}</a-select-option>
                                    <a-select-option value="MLK"
                                                     v-if="['select','treeselect','dialog','user','group','checkboxgroup'].includes(filterConfig.fc)">
                                        {{ i18n3('multipleFuzzyMatch', '多选模糊查询') }}
                                    </a-select-option>
                                    <a-select-option value="LT">{{ i18n3('lessThan', '小于') }}</a-select-option>
                                    <a-select-option
                                        value="LE">{{ i18n3('lessOrEqual', '小于等于') }}
                                    </a-select-option>
                                    <a-select-option value="GT">{{ i18n3('greater', '大于') }}</a-select-option>
                                    <a-select-option
                                        value="GE">{{ i18n3('greatOrEqual', '大于等于') }}
                                    </a-select-option>
                                </a-select>
                                <a-select v-if="filterConfig.dataType=='date'"
                                          v-model="filterConfig.fieldOp">
                                    <a-select-option value="EQ">{{ i18n3('equal', '等于') }}</a-select-option>
                                    <a-select-option value="NEQ">{{ i18n3('notEqual', '不等于') }}</a-select-option>
                                    <a-select-option value="LT">{{ i18n3('lessThan', '小于') }}</a-select-option>
                                    <a-select-option
                                        value="LE">{{ i18n3('lessOrEqual', '小于等于') }}
                                    </a-select-option>
                                    <a-select-option value="GT">{{ i18n3('greater', '大于') }}</a-select-option>
                                    <a-select-option
                                        value="GE">{{ i18n3('greatOrEqual', '大于等于') }}
                                    </a-select-option>
                                </a-select>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row
                    v-if="orgList.includes(filterConfig.fc) || selectList.includes(filterConfig.fc) || 'dialog' == filterConfig.fc">
                    <a-col :span="24">
                        <a-form-item :label="i18n('form.multiSelect','是否多选')">
                            <a-radio-group v-model="filterConfig.multiSelect">
                                <a-radio :value="true">{{ i18n('isMap.yes', '是') }}</a-radio>
                                <a-radio :value="false">{{ i18n('isMap.no', '否') }}</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="selectList.includes(filterConfig.fc)">
                    <a-col :span="24">
                        <a-form-item :label="i18n('form.valueSource','值来源')">
                            <a-radio-group :options="fromOptions" @change="fromChange" ref="fromRef"
                                           v-decorator="['from',{rules: [{ required: selectList.includes(filterConfig.fc), message: i18n('form.valueSource','值来源','input') }] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='self'">
                    <a-col :span="24">
                        <a-form-item :label="i18n('form.option','选项')">
                            <div class="table-operator">
                                <a-button @click="addRow">{{ $ti18('rxList.add', '新增') }}</a-button>
                                <a-button v-if="filterConfig.fc =='treeselect'" @click="addSubRow">
                                    {{ i18n('form.addSub', '新增子级') }}
                                </a-button>
                                <a-button @click="removeRow">{{ $ti18('rxList.delBtn', '删除') }}</a-button>
                                <a-button @click="upRow">{{ $comi18('grid.up', '向上') }}</a-button>
                                <a-button @click="downRow">{{ $comi18('grid.down', '向下') }}</a-button>
                            </div>
                            <rx-grid ref="props"
                                     :bordered="true"
                                     :allowRowSelect="true"
                                     :multiSelect="true"
                                     style="min-height:300px;"
                                     :dataSource="dataSource"
                                     :columns="columns"
                                     :showPage="false">
                                  <span slot="name" slot-scope="{text,record,index,blur}">
                                    <a-input v-model="record.name" @blur="blur(index,'name',text,record)"/>
                                  </span>
                                <span slot="key" slot-scope="{text,record,index,blur}">
                                    <a-input v-model="record.key" @blur="blur(index,'key',text,record)"/>
                                  </span>
                            </rx-grid>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='url'">
                    <a-col :span="24">
                        <a-form-item label="JSON URL">
                            <a-input
                                v-decorator="['url',
                                                    {rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='url',
                                                    message: rowi18n('form.requiredURL','URL必填')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='url'">
                    <a-col :span="12">
                        <a-form-item
                            :label="rowi18n('form.textField','文本字段')">
                            <a-input
                                v-decorator="['url_textfield',
                                    {rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='url',
                                    message:  rowi18n('form.textField','文本字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            :label="rowi18n('form.valField','值字段')">
                            <a-input
                                v-decorator="['url_valuefield',
                                    {rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='url',
                                    message: rowi18n('form.valField','值字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            :label="rowi18n('form.content','内容类型')">
                            <a-select allowClear
                                      v-decorator="['url_contentType',
                                        {rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='url',
                                        message: rowi18n('form.content','内容类型') + $comi18('formbase.mustInput', '必填!')}] }]">
                                <a-select-option value="form">form</a-select-option>
                                <a-select-option value="json">json</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            :label="rowi18n('form.datafield','数值字段')">
                            <a-input
                                v-decorator="['url_datafield',
                                    {rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='url',
                                    message: rowi18n('form.datafield','数值字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item
                            :label="i18n('form.method','HTTP方法')">
                            <a-select allowClear
                                      v-decorator="['url_method',
                                        {rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='url',
                                        message:i18n('form.method','HTTP方法') + $comi18('formbase.mustInput', '必填!')}] }]">
                                <a-select-option value="get">get</a-select-option>
                                <a-select-option value="post">post</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='dic'">
                    <a-col :span="24">
                        <a-form-item :label="rowi18n('form.dataDicItem','数据字典项')">
                            <rx-input-button ref="dic"
                                             v-decorator="['dicKey',{rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='dic',
                                             message: rowi18n('form.dataDicItem','数据字典项') + $comi18('formbase.mustInput', '必填!')}] }]"
                                             @click="selectDic"
                                             style="width: 100%;">
                            </rx-input-button>
                        </a-form-item>
                    </a-col>
                </a-row>


                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='sql'">
                    <a-col :span="24">
                        <a-form-item :label="rowi18n('form.customSQL','自定义SQL')">
                            <rx-input-button ref="sql" @click="openCustomQuery"
                                             v-decorator="['sql',{rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='sql',
                                             message: rowi18n('form.customSQL','自定义SQL') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='sql'">
                    <a-col :span="12">
                        <a-form-item :label="rowi18n('form.textField','文本字段')">
                            <a-select :options="sqlFields"
                                      v-decorator="['sql_textfield',{rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='sql',
                                      message:rowi18n('form.textField','文本字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label="rowi18n('form.numField','数值字段')">
                            <a-select :options="sqlFields"
                                      v-decorator="['sql_valuefield',{rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='sql',
                                      message:rowi18n('form.numField','数值字段') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='sql'">
                    <a-col :span="24">
                        <a-form-item :label="i18n('form.configuration','参数配置')">
                            <rx-grid :columns="paramsColumns"
                                     :dataSource="paramsData"
                                     ref="params"
                                     :showPage="false"
                                     style="height:200px;"
                                     :bordered="true">
                                <span slot="bindVal" slot-scope="{text,record,index,blur}">
                                    <a-select v-model="record.bindVal" :options="queryAry"
                                              @blur="blur(index,'bindVal',text,record)"/>
                                </span>
                            </rx-grid>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row v-show="selectList.includes(filterConfig.fc) && filterConfig.from=='grant'">
                    <a-col :span="24">
                        <a-form-item :label="rowi18n('form.authority','权限分类')">
                            <rx-input-button ref="grant" @click="openFormEntityDataType"
                                             v-decorator="['grant',{rules: [{ required: selectList.includes(filterConfig.fc) && filterConfig.from=='grant',
                                             message: rowi18n('form.authority','权限分类') + $comi18('formbase.mustInput', '必填!')}] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>


                <a-row v-show="filterConfig.fc =='dialog'">
                    <a-col :span="24">
                        <a-form-item :label="$comi18('rxDialog.dialog', '对话框')">
                            <rx-input-button ref="dialog" @click="selectDialog"
                                             v-decorator="['dialog',{rules: [{ required: filterConfig.fc =='dialog', message: i18n('form.dialog','对话框','input') }] }]"/>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row v-show="filterConfig.fc =='dialog'">
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :label="i18n('form.ctlValue','控件值')">
                            <a-select :options="dialogFields" v-decorator="['valueField']"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :label="i18n('form.ctlText','控件文本')">
                            <a-select :options="dialogFields" v-decorator="['textField']"/>
                        </a-form-item>
                    </a-col>
                </a-row>

                <a-row v-show="filterConfig.fc =='dialog'">
                    <a-col :span="24">
                        <a-form-item :label="i18n('form.configuration','参数配置')">
                            <rx-grid :columns="paramsDialogColumns"
                                     :dataSource="paramsDialogData"
                                     ref="dialogParams"
                                     :showPage="false"
                                     style="height:200px;"
                                     :bordered="true">
                                <span slot="bindVal" slot-scope="{text,record,index,blur}">
                                  <a-select v-model="record.bindVal" allowClear :options="dialogQueryAry"
                                            @change="onChangeBinVal($event,record)"/>
                                </span>
                                <span slot="isRequired" slot-scope="{text,record,index,blur}">
                                    <a-switch v-model="record.isRequired"/>
                                </span>
                            </rx-grid>
                        </a-form-item>
                    </a-col>
                </a-row>


            </a-form>
        </div>
    </rx-layout>

</template>

<script>
import {RxLayout, Dialog, Util} from "@lowcode/jpaas-common-lib";
import miniQuery from './miniQuery';
import MiniQuery from "@/views/modules/form/core/MiniQuery.vue";
import FormBoListApi from "@/api/form/core/formBoList";

export default {
    name: "miniQuery_textbox",
    mixins: [miniQuery],
    components: {
        RxLayout
    },
    data() {
        return {
            defaultVal: "",
            fieldControls: [
                {title: this.i18n2('textBox', '文本框'), value: 'textbox', widthHeight: ['800px', '300px']},
                {label: this.i18n2('numBox', '数字框'), value: 'number', widthHeight: ['750px', '300px']},
                {label: this.i18n2('date', '日期'), value: 'datepicker', widthHeight: ['800px', '400px']},
                {label: this.i18n2('user', '用户'), value: 'user', widthHeight: ['750px', '400px']},
                {label: this.i18n2('department', '部门'), value: 'group', widthHeight: ['750px', '400px']},
                {label: this.i18n2('dropDownBox', '下拉框'), value: 'select', widthHeight: ['850px', '750px']},
                {label: this.i18n2('treeBox', '树形下拉框'), value: 'treeselect', widthHeight: ['800px', '770px']},
                {label: this.i18n2('checkBox', '复选框'), value: 'checkboxgroup', widthHeight: ['800px', '750px']},

                {label: this.i18n2('customDialog', '自定义对话框'), value: 'dialog', widthHeight: ['850px', '750px']}
            ],
            orgList: ['user', 'group'],
            selectList: ['select', 'treeselect', 'checkboxgroup'],
            fromOptions: [
                {'value': 'self', 'label': this.rowi18n('form.custom', '自定义')},
                {'value': 'url', 'label': 'URL'},
                {'value': 'dic', 'label': this.rowi18n('form.dataDictionary', '数据字典')},
                {'value': 'sql', 'label': this.rowi18n('form.customSQL', '自定义SQL')},
                {'value': 'grant', 'label': this.rowi18n('form.data', '权限数据')}
            ],
            filterConfig: {
                type: "query",
                autoFilter: "YES",
                isSeted: false,
                fc: "textbox",
                fieldOp: "EQ",
                dataType: "",
                tablePre: "",
                fieldName: "",
                fieldLabel: "",
                multiSelect: false,
                from: "self"
            },
            dataSource: [],
            columns: [
                {
                    title: this.$ti18('rxList.index', '序号'),
                    type: 'indexColumn',
                    width: 80,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: this.$ti18('rxForm.name', '名称'),
                    dataIndex: 'name',
                    width: 120,
                    allowCellEdit: true,
                    scopedSlots: {customRender: 'name'}
                },
                {
                    title: this.rowi18n('form.name', '标识名'),
                    dataIndex: 'key',
                    width: 120,
                    allowCellEdit: true,
                    scopedSlots: {customRender: 'key'}
                }
            ],
            sqlFields: [],
            paramsColumns: [
                {title: this.$comi18('rxDialog.paramName', '参数名称'), dataIndex: 'comment', width: 120},
                {
                    title: this.i18n('form.bindValue', '绑定值'),
                    dataIndex: 'bindVal',
                    width: 120,
                    allowCellEdit: true,
                    scopedSlots: {customRender: 'bindVal'}
                }
            ],
            paramsData: [],
            queryAry: [],
            dialogFields: [],
            paramsDialogColumns: [
                {title: this.$comi18('rxDialog.paramName', '参数名称'), dataIndex: 'fieldName', width: 120},
                {
                    title: this.$ti18('rxForm.bindValue', '绑定值'),
                    dataIndex: 'bindVal',
                    width: 120,
                    scopedSlots: {customRender: 'bindVal'}
                },
                {
                    title: this.$ti18('rxForm.required', '是否必填'),
                    dataIndex: 'isRequired',
                    width: 120,
                    scopedSlots: {customRender: 'isRequired'}
                }
            ],
            paramsDialogData: [],
            baseQueryAry: [],
            dialogQueryAry: []
        }
    },
    methods: {
        i18n3(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "apiFormCore", key);
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "miniQuery", key);
        },
        rowi18n(name, text, key) {
            return this.$ti18(name, text, "rowControls", key);
        },
        selectDialog(vm) {
            Dialog.openFormBoListDialog({
                curVm: this, widthHeight: ['800px', '600px'], data: {isDialog: 'YES'}
            }, function (self, data) {
                var item = data[0];
                self.loadDialogFields(item);
                vm.setVal(item.key, item.name);
            })
        },
        loadDialogFields(row) {
            let self_ = this;
            FormBoListApi.get(row.pkId).then(res => {
                var data = res.data;
                var fieldsStr = data.fieldsJson;
                self_.loadSearchJsons(data);
                if (!fieldsStr) return;
                var fileds = JSON.parse(fieldsStr);
                var ary = [];
                fileds.map(function (item) {
                    if (item.isReturn) {
                        ary.push({
                            value: item.field,
                            label: item.header
                        })
                    }
                })
                this.dialogFields = ary;
            })
        },
        loadSearchJsons(data) {
            if (!data.searchJson) {
                return;
            }
            var typeJson = {string: "S", int: "I", date: "D", float: "F"};
            var searchJson = JSON.parse(data.searchJson);
            searchJson = searchJson.filter(item => item.type == 'income');
            if (searchJson && searchJson.length > 0) {
                this.paramsDialogData = searchJson.map(function (item) {
                    var tablePre = item.tablePre ? item.tablePre + "." : "";
                    var type = typeJson[item.dataType] ? typeJson[item.dataType] : "S";
                    var param = item.autoFilter == 'YES' ? "Q_" + tablePre + item.fieldName + "_" + type + "_" + item.fieldOp : item.fieldName;
                    return {
                        fieldName: item.fieldLabel,
                        field: param,
                        bindVal: "",
                        bindName: "",
                        isRequired: false
                    }
                });
            } else {
                this.paramsDialogData = []
            }
            this.showSearchJson = true;
        },
        customSetData(data, fieldDats, queryAry) {
            this.baseQueryAry = queryAry;
            if (this.mdl.filterConfig) {
                this.$set(this, "filterConfig", JSON.parse(this.mdl.filterConfig));
            } else {
                this.filterConfig.dataType = this.mdl.dataType;
                this.filterConfig.fieldName = this.mdl.field;
                this.filterConfig.tablePre = this.mdl.tablePre || "";
                //this.mdl.fieldName = this.mdl.field;
                this.filterConfig.fieldLabel = this.mdl.header;
            }
            if (this.orgList.includes(this.filterConfig.fc)) {
                this.handleMultiSelect();
            }
            if (this.selectList.includes(this.filterConfig.fc)) {
                this.handleMultiSelect();
                this.handleSelectSetting(data, fieldDats, queryAry);
            }
            if (this.filterConfig.fc == "dialog") {
                this.handleMultiSelect();
                this.handleDialogSetting(data, fieldDats, queryAry);
            }
            this.$set(this.mdl, "tablePre", this.filterConfig.tablePre);
            this.$set(this.mdl, "fieldName", this.filterConfig.fieldName);
            if (queryAry && queryAry.length > 0) {
                let self = this;
                this.queryAry = [];
                queryAry.map(function (item) {
                    if (!item.filterConfig) {
                        return;
                    }
                    let config = JSON.parse(item.filterConfig);
                    if (item.idx_ != self.mdl.idx_) {
                        self.queryAry.push({
                            value: 'Q_' + item.field + '_S' + (config.fieldOp ? '_' + config.fieldOp : ''),
                            label: item.header
                        })
                    }
                });

                var typeJson = {string: "S", int: "I", date: "D", float: "F"};
                queryAry.map(function (item) {
                    if (item.idx_ != self.mdl.idx_) {
                        let fieldLabel = self.$i18(item.i18nJson, item.fieldLabel) || item.fieldLabel;
                        var tablePre = item.tablePre ? item.tablePre + "." : "";
                        var type = typeJson[item.dataType] ? typeJson[item.dataType] : "S";
                        var param = item.autoFilter == 'YES' ? "Q_" + tablePre + item.fieldName + "_" + type + "_" + item.fieldOp : item.fieldName;
                        self.dialogQueryAry.push({
                            value: param,
                            label: fieldLabel,
                            i18nJson: item.i18nJson
                        });
                    }
                });
            }

        },
        handleDialogSetting(data, fieldDats, queryAry) {
            let self = this;
            self.mdl = self.filterConfig;
            self.form.setFieldsValue(self.mdl);

            if (this.mdl.params) {
                var params = this.mdl.params || '[]';
                this.paramsDialogData = JSON.parse(params);
                this.showSearchJson = true;
            }
            let dialog = this.$refs.dialog;
            if (this.mdl.dialog) {
                dialog.setVal(this.mdl.dialog, this.mdl.dialog_name);
                this.dialogFields = this.mdl.sqlFields || [];
            }
        },
        openFormEntityDataType(vm) {
            var self = this;
            var config = {curVm: this, widthHeight: ['800px', '600px'], data: {multiSelect: false}};
            Dialog.openFormEntityDataTypeDialog(config, function (ary) {
                var data = ary[0];
                vm.setVal(data.id, data.name);
            })
        },
        addRow() {
            this.$refs.props.addRow();
        },
        addSubRow() {
            var selectRow = this.$refs.props.getSelectedRow();
            if (!selectRow) {
                this.$message.error("请选择一行！");
                return;
            }
            var ary = [];
            if (selectRow.children) {
                ary = selectRow.children;
            } else {
                ary = selectRow.children = [];
            }
            this.$refs.props.addItem(ary, {parentId: selectRow.idx_});
            this.$refs.props.$forceUpdate();
        },
        removeRow() {
            this.$refs.props.removeRows();
        },
        upRow() {
            this.$refs.props.moveUp();
        },
        downRow() {
            this.$refs.props.moveDown();
        },
        openCustomQuery(vm) {
            Dialog.openCustomDataDialog({
                curVm: this, widthHeight: ['1200px', '600px']
            }, function (self, data) {
                self.loadFields(data);
                vm.setVal(data.key, data.name);
            })
        },
        loadFields(row) {
            var fieldStr = row.resultField;
            var whereStr = row.whereField;
            if (whereStr) {
                let self = this;
                self.paramsData = [];
                var fields = JSON.parse(whereStr);
                fields.map(function (item) {
                    if (item.valueSource == 'param') {
                        self.paramsData.push(Object.assign(item, {bindVal: ""}));
                    }
                })
            }
            if (fieldStr) {
                var fileds = JSON.parse(fieldStr);
                var ary = fileds.map(function (item) {
                    return {
                        value: item.fieldName,
                        label: item.comment
                    }
                })
                this.sqlFields = ary;
            }
        },
        handleSelectSetting(data, fieldDats, queryAry) {
            let self = this;
            if (!self.filterConfig.from) {
                self.filterConfig.from = 'self';
                self.filterConfig.multiSelect = false;
            }

            self.mdl = self.filterConfig;
            self.form.setFieldsValue(self.mdl);

            if (self.mdl.props) {
                self.dataSource = JSON.parse(self.mdl.props);
            }

            if (self.mdl.from == "dic") {
                let dic = self.$refs.dic;
                self.mdl.dicKey = '{"value":' + '"' + self.mdl.dicKey + '"' + ',"text":' + '"' + self.mdl.dicName + '"' + '}';
                dic.setVal(self.mdl.dicKey, self.mdl.dicName);
            }

            if (self.mdl.from == "grant") {
                var grant = self.$refs.grant;
                self.mdl.grant = '{value:\'' + self.mdl.grant + '\',text:\'' + self.mdl.grant_name + '\'}';
                grant.setVal(self.mdl.grant, self.mdl.grant_name);
            }


            if (self.mdl.from == "sql") {
                let sql = self.$refs.sql;
                self.mdl.sql = '{value:\'' + self.mdl.sql + '\',text:\'' + self.mdl.sql_name + '\'}';
                sql.setVal(self.mdl.sql, self.mdl.sql_name);
                self.sqlFields = self.mdl.sqlFields || [];
                var params = self.mdl.params || '[]';
                self.paramsData = JSON.parse(params);
            }

            self.$forceUpdate();
        },
        fromChange(e) {
            this.filterConfig.from = e.target.value;
        },
        //选择数据字典
        selectDic(vm) {
            var conf = {
                curVm: this, data: {allowTree: true}, widthHeight: ['800px', '600px'],
            }
            let self_ = this;
            Dialog.openSysDicDialog(conf, function (curVue, row) {
                self_.$set(self_.mdl, "dicKey", row.alias);
                vm.setVal(row.alias, self_.$i18(row.name, "名称"));
            })
        },
        handleMultiSelect() {
            //是否多选设置默认为是
            if (typeof this.filterConfig.multiSelect == "undefined") {
                this.filterConfig.multiSelect = true;
            }
            this.$set(this.mdl, "multiSelect", this.filterConfig.multiSelect);
            this.$forceUpdate();
        },
        customGetData() {
            if (this.selectList.includes(this.filterConfig.fc)) {
                this.handleSelectGetData();
                return;
            } else if (this.filterConfig.fc == 'dialog') {
                this.handleDialogGetData();
                return;
            }
            this.mdl.filterConfig = JSON.stringify(this.filterConfig);
        },
        handleDialogGetData() {
            let config = this.filterConfig;
            var dialog = this.$refs.dialog.getVal();
            config.params = JSON.stringify(this.$refs.dialogParams.getData());
            config.dialog = dialog.value;
            config.dialog_name = dialog.text;
            config.sqlFields = this.dialogFields;
            config.valueField = this.mdl.valueField;
            config.textField = this.mdl.textField;
            config.fieldName = this.mdl.fieldName;
            config.tablePre = this.filterConfig.tablePre;
            this.mdl.filterConfig = JSON.stringify(config);
        },
        handleSelectGetData() {
            let config = this.filterConfig;
            if (config.from == "self") {
                config.dataSource = this.dataSource;
            }
            if (config.from == "url") {
                config.url = this.mdl.url;
                config.url_textfield = this.mdl.url_textfield;
                config.url_valuefield = this.mdl.url_valuefield;
                config.url_contentType = this.mdl.url_contentType;
                config.url_datafield = this.mdl.url_datafield;
                config.url_method = this.mdl.url_method;
            }
            if (config.from == "dic") {
                let dic = this.$refs.dic;
                let dicJson = dic.getVal();
                config.dicKey = dicJson.value;
                config.dicName = dicJson.text;
            }

            config.props = JSON.stringify(this.$refs.props.getData());

            if (config.from == "sql") {
                config.params = JSON.stringify(this.$refs.params.getData());
                var sql = this.$refs.sql.getVal();
                config.sql = sql.value;
                config.sql_name = sql.text;
                config.sqlFields = this.sqlFields;
                config.sql_textfield = this.mdl.sql_textfield;
                config.sql_valuefield = this.mdl.sql_valuefield;
            }
            if (config.from == "grant") {
                var grant = this.$refs.grant.getVal();
                config.grant = grant.value;
                config.grant_name = grant.text;
            }
            config.tablePre = this.filterConfig.tablePre;
            config.fieldName = this.mdl.fieldName;
            this.mdl.filterConfig = JSON.stringify(config);
        },
        showSearchConfigEditor(event) {
            let self = this;
            var row = this.filterConfig;
            if (!row || row.fc == "-") {
                this.$message.error(this.i18n2('notEmpty', '搜索控件列不能为空'));
                return false;
            }
            var aryType = this.fieldControls.filter(item => {
                return row.fc == item.value;
            })
            var wh = aryType[0].widthHeight;
            let queryAry = [];
            queryAry.push(this.filterConfig);
            var conf = {
                component: MiniQuery,
                title: this.i18n2('searchConfig', '搜索条件配置'),
                curVm: this,
                data: {
                    row: row,
                    fieldDatas: this.fieldDatas,
                    queryAry: queryAry,
                    showDefault: true
                },
                widthHeight: wh,
                shade: true
            };
            Util.open(conf, function (action) {
                if (action != 'ok') {
                    return;
                }
                var data = this.getData();
                data.isSeted = true;
                self.filterConfig = Object.assign(self.filterConfig, data);
            });
        },
        fcChange(value) {
            if (this.orgList.includes(value)) {
                this.filterConfig.fieldOp = "IN";
            } else if (value == "numberrange") {
                this.filterConfig.fieldOp = "";
            } else if (this.selectList.includes(value)) {
                this.handleMultiSelect();
                this.handleSelectSetting();
            }
            this.$forceUpdate();
        },
        updateI18nName() {
            let i18nJson = this.getI18nJson();
            i18nJson[this.i18nCurrent] = this.filterConfig.fieldLabel;
            this.filterConfig.i18nJson = JSON.stringify(i18nJson);
        },
        getI18nJson() {
            let i18nJson = {};
            let i18nConf = this.filterConfig.i18nJson;
            if (i18nConf) {
                i18nJson = JSON.parse(i18nConf);
                let val = i18nJson[this.i18nCurrent];
                if (!val) {
                    i18nJson[this.i18nCurrent] = this.filterConfig.fieldLabel;
                }
            } else {
                i18nJson[this.i18nCurrent] = this.filterConfig.fieldLabel;
                i18nJson[this.i18nDefault] = this.filterConfig.fieldLabel;
            }
            return i18nJson;
        },
        editI18nName() {
            let self_ = this;
            let conifg = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                data: {
                    i18nJson: this.getI18nJson()
                }
            }
            Dialog.openI18nDialog(conifg, function (action, data) {
                self_.filterConfig.fieldLabel = data[self_.i18nCurrent];
                self_.filterConfig.i18nJson = JSON.stringify(data);
            });
        },
    }
}
</script>

<style scoped>
.is-seted {
    color: #70B90B;
    margin-left: 5px;
}
</style>